<template>
  <div v-if="allprod.length > 0" class='item'>
    <el-row>
      <el-col :span="this.spanlength" v-for="(item) in allprod" class="d1" :key="item" >
        <el-card >
          <div class="d2">
            <img :src=item.imgurl class="image" @click="toView(item)">
          </div>
          <div class="d3">
            <span>{{item.name}}</span><span>{{item.price}}</span>
            <div class="bottom">
              <time class="time">{{item.shopname}}</time>
              <el-button type="text" class="button" @click='submitForm(item)'>加入购物车</el-button>
            </div>
          </div>
        </el-card> 
      </el-col>
    </el-row>
  </div>  
</template>

<script>
import { ref, defineComponent, watch, reactive } from "vue";

export default {
  name:'item',
  data() {
    return {
      mes:'AllProducts',
      currentDate: new Date(), 
      allprod:[],  
      cart:[], 
      spanlength:6
    }
  },
  methods: {

  //产品预览
  toView(item){
    this.$router.push({path:'/productView',query:{item:JSON.stringify(item)}})
  },
    // 加入购物车
    submitForm(item){    
      // console.log(item)
      // console.log(index);
      this.$axios.post(`api/cart/add/${this.$store.state.id}`, item)
          .then(res=>{
              //加入成功
              this.$message({
                message:res.data.mes,
                type:'success '
              }) 
          // this.findallcart()
          })              
    },
    // 加入成功后增加购物车显示
    // findallcart(){
    //   this.$axios.get('/api/cart/getallmes').then(res=>{
    //     // 提价购物车和购物车数量的状态
    //     this.cart = res.data
    //     this.$store.commit('addcount',this.cart.length)              
    //     this.$store.commit('addcart',this.cart)           
    //   })
    // },      
    // 请求得到所有产品信息
    findForm(){
      this.$axios.get(`/api/allproduct/getallmes`)
          .then(res=>{
            this.allprod = res.data
          })
    },      
          
  },
  mounted(){
    if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
      this.spanlength = 12
      console.log(this.spanlength);
    }else{
      this.spanlength = 6
    }       
    this.findForm();
    // this.findallcart()
    // 判断是否认证token
    if(localStorage.eletoken){
      // this.counts = this.$store.state.count
      // this.counts = this.$store.state.tempcart.length
    }        
    // this.carttotelprice = 
  }    
}
</script>

<style scoped>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
}

.image {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

div.el-pagination{
  width: 100%;
}
.block{
  text-align: center;
}
.d2{
  width: 100%;
  height: 80%;
}
.el-row{
  width: 100%;
  height: 25rem;
}
.el-col-6{
  width: 100%;
  height: 100%;
}
:deep(.el-card__body){
  width: 100%;
  height: 100%;   
  padding: 0 !important
}
.d1{
  width: 100%;
  height: 100%;  
  padding: 20px;
}

.el-card.is-always-shadow{
  width: 100%;
  height:100%;
}
.d3{
  width: 100%;
  height: 20%;  
}
.item{
  width: 100%;
  height:800px; 
  overflow: hidden; 
  padding-top: 20px;
  padding-bottom: 40px;  
}
</style>